@charset "UTF-8";
$wid-100 :100%;
$hig-100: 100%;
$font-s23: 23px;
$font-r12: 0.324324rem;
$font-r15: 0.4055rem;
$font-r14: 0.378rem;
$font-r25: 0.6666rem;
$font-r24: 0.648rem;
$center: center;
$c-888: #888;
$r2: 0.054rem;
$r5: 0.135rem;
$r8: 0.216rem;
$r10: 0.27rem;
$r12: 0.324324rem;
$r13: 0.351rem;
$r15: 0.4055rem;
$r14: 0.378rem;
$r20: 0.54rem;
$r25: 0.6666rem;
$r24: 0.648rem;
$r30: 0.81rem;
$r40: 1.08rem;
$r45: 1.216rem;
$r50: 1.35rem;
$r55: 1.48rem;
$r60: 1.62rem;
$r65: 1.756rem;
$c-cq: #051B28;
  /**home***/
#home{
}
body,html{
  overflow-x: hidden;
}
#app {

  max-width: 10rem;
  height: 100%;
  margin: 0 auto;
  .main{
    max-width: 10rem;
    height: auto;
    transform: translateZ(0);
  }
  .header-wrap{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    padding:  0.18rem;
    line-height:  0.4864864864864865rem;
    background: #ff6000;
    .search-wrap{
      float: left;
      width: 86.8%;
      margin-left: 0.13513513513513514rem;
      background: #B52600;
      line-height:   0.649rem;
      font-size:  0.3783783783783784rem;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      i.icon{
        display: inline-block;
        width: 0.45rem;
        height:  0.47rem;
        img{
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
    .logo{
      float: left;
      width: 0.7317073170731707rem;
      height: 0.7317073170731707rem;
      background: url('');
      background-repeat: no-repeat;
      background-position: center top;
      background-size: contain;
    }
  }
  .Bheight{
    height: 86px;
  }
}

/***swpier***/
#swpier1{
  /*position: relative;*/
  width: $wid-100;
  height: 3.23rem;
  ul{
      width: $wid-100;
      height: $hig-100;
      @each $li,$url in (
        'li.banner1':'//gw.alicdn.com/imgextra/TB2NGusd_JYBeNjy1zeXXahzVXa_!!28-0-lubanu.jpg_q50.jpg',
        'li.banner2':'//img.alicdn.com/simba/img/TB12UgXgv6H8KJjSspmSuv2WXXa.jpg_q50.jpg',
        'li.banner3':'//img.alicdn.com/simba/img/TB1U6_Sdx1YBuNjy1zcSuvNcXXa.jpg_q50.jpg',
        'li.banner4':'//gw.alicdn.com/imgextra/i4/13/TB2.V8LdKuSBuNjSsziXXbq8pXa_!!13-0-lubanu.jpg_q50.jpg',
        'li.banner5':'//img.alicdn.com/imgextra/i2/9/TB2Lh8raIj_B1NjSZFHXXaDWpXa_!!9-0-yamato.jpg_q50.jpg',
        'li.banner6':'//gw.alicdn.com/imgextra/i4/52/TB22hk1dAOWBuNjSsppXXXPgpXa_!!52-0-lubanu.jpg_q50.jpg',
        'li.banner7':'//gw.alicdn.com/imgextra/i2/160/TB2XrsxaTdYBeNkSmLyXXXfnVXa_!!160-0-lubanu.jpg_q50.jpg',
        'li.banner8':'//gw.alicdn.com/imgextra/i1/54/TB2P7PMdpmWBuNjSspdXXbugXXa_!!54-0-lubanu.jpg_q50.jpg'
      ){
        #{$li} {
         /* position: absolute;
          left: 0;
          top: 0;*/
          width: $wid-100;
          height: $hig-100;
          background: url("#{$url}") no-repeat center/100% 100%;
        }
      }
    }
}

/**server***/
#server{
  /*padding: 0.40540540540540543rem 0.6756756756756757rem;*/
  width: 10rem;
/*  height: 3.5675675675675675rem;*/
  div.server-main{
    height: 4.56rem;
  }
  ul.server-wrap{

    margin-left: 0.351rem;
    width: 100%;
    height: 2.162rem;
    @each $li,$url in (
      'li.one':'//gw.alicdn.com/tps/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png?imgtag=avatar',
      'li.two':'//gw.alicdn.com/tps/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png?imgtag=avatar',
      'li.three':'//gw.alicdn.com/tps/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png?imgtag=avata',
      'li.four':'//gw.alicdn.com/tps/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png?imgtag=avatar',
      'li.five':'//gw.alicdn.com/tps/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png?imgtag=avatar',
      'li.six':'//gw.alicdn.com/tfs/TB1jorbepOWBuNjy0FiXXXFxVXa-183-129.png',
      'li.seven':'//gw.alicdn.com/tps/TB1LNMxPXXXXXbhaXXXXXXXXXXX-183-129.png',
      'li.aight':'//gw.alicdn.com/tps/TB1cniBJpXXXXataXXXXXXXXXXX-183-129.png?imgtag=avatar',
      'li.night':'//img.alicdn.com/tfs/TB1Kxe8QFXXXXbSXVXXXXXXXXXX-183-129.png',
      'li.ten':'//gw.alicdn.com/tps/i1/TB1c1FMIpXXXXawXpXXN4ls0XXX-183-129.png?imgtag=avatar'
    ){
      #{$li} {
        float: left;
        width: 1.892rem;
        line-height:  2.163rem;
        height:  2.163rem;
        text-align: center;
        div.img{
          /* position: absolute;
         left: 0;
         top: 0;*/
          margin-top: 0.351rem;
          box-sizing: border-box;
          width: 1.61rem;
          height: 1.166rem;
          background: url("#{$url}") no-repeat center/100% 100%;
        }
        a{
          display: block;
          width: 1.6756rem;
          height: $hig-100;
          color: #666;
        }
        p.text{
          width: 1.6756rem;
          line-height: 0.6756rem;
          font-size:0.324rem;
        }
      }
    }

  }


  ul.server-wrap li{
   /* float: left;
    margin-left: 22px;
    width: 95px;
    height: 100px;
    text-align: center;*/
    /*a{
      width: $wid-100;
      height: $hig-100;
      color: #666;
      p.text{
        margin-top: 5px;
        width: $wid-100;
        font-size: 23px;
      }
    }*/
  }
}

/**topLine***/

@keyframes aMove {
  0%{
    opacity: 0;
    -webkit-transform: translateY(100%)
  }
  20%,80%{opacity: 1; -webkit-transform: translateY(0%)}
  100%{opacity: 0;-webkit-transform: translateY(-100%)}
}
@keyframes bMove {
  0%{opacity: 0;transform: translateY(100%)}
  20%,80%{opacity: 1;transform: translateY(0%)}
  100%{opacity: 0;transform: translateY(-100%)}
}
#topLine{
  position: relative;
  width: 10rem;
  height: 0.812rem;
  box-sizing: border-box;
  border-top: 1px solid rgb(232, 232, 232);
  div.move{
    overflow: hidden;
    position: absolute;
    top: 0.135rem;
    right: 0;
    width: 7.668rem;
    height: 0.649rem;
    line-height: 0.649rem;
    -webkit-transform: translateY(0%);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
  }
  span.icon{
    display: block;
    width: 2.163rem;
    height: 0.8101rem;
    background: url('//gw.alicdn.com/tps/i3/TB12wM3HXXXXXbxapXXdFmWHFXX-207-60.png?imgtag=avatar')no-repeat center/1.61719rem 0.46875rem;
    border-right: 1px solid rgb(232, 232, 232);
  }
  ul.animate.aShow{
    -webkit-animation: aMove 5s ease-in-out  infinite!important;
    -moz-animation: aMove 5s ease-in-out  infinite!important;
    -ms-animation: aMove 5s ease-in-out  infinite!important;
    -o-animation: aMove 5s ease-in-out  infinite!important;
  }
  /*ul.animate.bShow{
    animation: aMove 5s ease-in-out  5s 1 forwards!important;
  }
  ul.animate.cShow{
    animation: aMove 5s ease-in-out 10s  1 forwards !important;
  }*/
  ul.animate:nth-of-type(1){
    display: none;
    opacity: 0;
    top: 0;
    right: 0;
  }
  ul.animate:nth-of-type(2){
    display: none;
    opacity: 0;
    top: 0;
    right: 0;
  }
  ul.animate:nth-of-type(3){
    display: none;
    opacity: 0;
    top: 0;
    right: 0;
  }
  ul.animate{
    position: absolute;
    width: 7.668rem;
    height: 0.649rem;
    line-height: 0.649rem;
    -webkit-transform: translateY(0%);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    .border{
      float: left;
      padding: 0 0.06525rem;
      line-height: 0.46875rem;
      border:1px solid red;
      font-size: $font-r12;
      color: red;
      text-align: center;
      border-radius: 0.125rem;
    }
    .text{
      float: left;
      margin-left: 0.19rem;
      width: 6.36rem;
      font-size: $font-r15;
      height: 0.5946rem;
      line-height: 0.5946rem;
      white-space: nowrap;
    }
  }
}

/**cheap***/
#cheap{
  .top{
    width: 10rem;
    height: 2.8648rem;
    border-top: 1px solid rgb(232, 232, 232);
    border-bottom: 1px solid rgb(232, 232, 232);
    .one{
      width: 3.89rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .two{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .three{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .four{
      width: 2.027rem;
      height: 2.8648rem;
      box-sizing: border-box;
    }
  }
  .bottom{
    width: 10rem;
    height: 2.8648rem;
    .one{
      width: 3.89rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .two{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .three{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .four{
      width: 2.027rem;
      height: 2.8648rem;
      box-sizing: border-box;
    }
  }
  .word{
    position: relative;
    width: 10rem;
    height: 0.844rem;
    line-height: 0;
    text-align: center;
    span.icon{
      position: absolute;
      top:50%;
      left: 44%;
      display: block;
      width: 0.4324rem;
      height: 0.4324rem;
      background: url('//img.alicdn.com/tps/TB1t9n6LFXXXXaXXXXXXXXXXXXX-60-60.png') no-repeat center/contain;
      -webkit-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
    span.text{
      position: absolute;
      top: 50%;
      left: 44%;
      display: block;
      width: 1.351rem;
      line-height: 0.864rem;
      height: 0.864rem;
      font-size: $font-r14;
      color: #FA3402;
      -webkit-transform: translate(19%,-50%);
      -o-transform: translate(19%,-50%);
      -ms-transform: translate(19%,-50%);
      transform: translate(19%,-50%);
    }
  }
}

/**tall***/
@mixin pics{
  float: left;
  width: 2.466rem;
  height: 3rem;
}
#tianm{
  .top{
    width: 10rem;
    height: 3rem;
    box-sizing: border-box;
    border-top: 1px solid rgb(231,231,231);
    .left{
      float: left;
      width: 4.984rem;
      height: 3rem;
      box-sizing: border-box;
      border-right: 1px solid rgb(231,231,231);
      border-bottom: 1px solid rgb(231,231,231);
    }
    .right{
      float: left;
      width: 5rem;
      height: 3rem;
      box-sizing: border-box;
      border-bottom: 1px solid rgb(231,231,231);
    }
  }
  .bottom{
    width: 10rem;
    height: 3rem;
    .one{
     @include pics;
      border-right: 1px solid rgb(231,231,231);
    }
    .two{
      @include pics;
      border-right: 1px solid rgb(231,231,231);
    }
    .three{
      @include pics;
      border-right: 1px solid rgb(231,231,231);
    }
    .four{
      @include pics;
    }
  }
  .word{
    position: relative;
    width: 10rem;
    height: 0.844rem;
    line-height: 0;
    text-align: center;
    span.icon{
      position: absolute;
      top:50%;
      left: 44%;
      display: block;
      width: 0.4324rem;
      height: 0.4324rem;
      background: url('//img.alicdn.com/tps/TB1xT2ILFXXXXb9XVXXXXXXXXXX-60-60.png') no-repeat center/contain;
      -webkit-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
    span.text{
      position: absolute;
      top: 50%;
      left: 42%;
      display: block;
      width: 2rem;
      line-height: 0.864rem;
      height: 0.864rem;
      font-size: $font-r14;
      color: #ff2f1b;
      -webkit-transform: translate(19%,-50%);
      -o-transform: translate(19%,-50%);
      -ms-transform: translate(19%,-50%);
      transform: translate(19%,-50%);
    }
  }
}

/**feature***/
#feature{
  .top{
    width: 10rem;
    height: 2.8648rem;
    border-top: 1px solid rgb(232, 232, 232);
    border-bottom: 1px solid rgb(232, 232, 232);
    .one{
      width: 3.89rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .two{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .three{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .four{
      width: 2.027rem;
      height: 2.8648rem;
      box-sizing: border-box;
    }
  }
  .bottom{
    width: 10rem;
    height: 2.8648rem;
    .one{
      width: 3.89rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .two{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .three{
      width: 2.027rem;
      height: 2.8648rem;
      border-right: 1px solid rgb(232, 232, 232);
      box-sizing: border-box;
    }
    .four{
      width: 2.027rem;
      height: 2.8648rem;
      box-sizing: border-box;
    }
  }
  .word{
    position: relative;
    width: 10rem;
    height: 0.844rem;
    line-height: 0;
    text-align: center;
    span.icon{
      position: absolute;
      top:50%;
      left: 44%;
      display: block;
      width: 0.4324rem;
      height: 0.4324rem;
      background: url('//img.alicdn.com/tps/TB1t9n6LFXXXXaXXXXXXXXXXXXX-60-60.png') no-repeat center/contain;
      -webkit-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
    }
    span.text{
      position: absolute;
      top: 50%;
      left: 42%;
      display: block;
      width: 2rem;
      line-height: 0.864rem;
      height: 0.864rem;
      font-size: $font-r14;
      color: #FA3402;
      -webkit-transform: translate(19%,-50%);
      -o-transform: translate(19%,-50%);
      -ms-transform: translate(19%,-50%);
      transform: translate(19%,-50%);
    }
  }
}

/**banner2***/
#more{
  width: 10rem;
  height: 3.027rem;
  .top{
    height: 0.953rem;
    line-height: 0.953rem;
    .left{
      width: 4.266rem;
      height: 0.953rem;
    }
    .right{
      position: relative;
      float: right;
      width: 2.70rem;
      height: 0.953rem;
      text-align: right;
      .text{
        position: absolute;
        right: 0.4324rem;
        color: #666;
        font-size: $font-r12;
      }
      .gt{
        position: absolute;
        right: 0;
        display: block;
        margin-top: 0.23rem;
        width: 0.459rem;
        line-height: 0.459rem;
        height: 0.459rem;
        font-size: 14px;
        color: #ff6100;
        font-weight: bold;
      }
    }
  }
  .bottom{
    width: 10rem;
    height: 2.054rem;
  }
}
/**everyday***/
#everyDay{
  width: 10rem;
  height: 5.405rem;
  .top{
    .left{
      float: left;
      width: 4.98rem;
      height: 0.969rem;
      .line{
        float: left;
        display: block;
        width: 0.156rem;
        height: 0.969rem;
        background: #ff9d09;
      }
      .text{
        float: left;
        margin-left: 0.188rem;
        line-height: 0.969rem;
        font-size: $font-r15;
      }
    }
    .right{
      float: right;
      position: relative;
      width: 4.88rem;
      height: 0.969rem;
      line-height: 0.969rem;
      .text{
        position: absolute;
        right: 0.7567rem;
        font-size: $font-r12;
      }
      .gt{
        position: absolute;
        margin-top: 0.270rem;
        right: 0.243rem;
        width: 0.432rem;
        height: 0.432rem;
        background: #ff6000;
        color: #ffffff;
        text-align: center;
        line-height: 0.432rem;
        font-weight: bold;
        font-size: 14px;
      }
    }
    height: 0.969rem;
  }
  .bottom{
    width: 10rem;
    height: 4.4594rem;
    .lft{
      margin-left: 0.188rem;
      float: left;
      width: 4.813rem;
      height: 3.781rem;
      .left{
        width: 3.125rem;
        height: 3.328rem;
      }
      .right{
        float: right;
        width: 1.62162rem;
        height: 3.188rem;
        .top{
          width: 1.62162rem;
          height: 1.62162rem;
        }
        .bottom{
          @extend .top;
        }
      }
      .text{
        width: 4.813rem;
        height: 0.5405rem;
        line-height:0.5405rem;
        font-size: $font-r12;
        color: #666666;
      }
    }
    .rit{
      margin-left: 0.063rem;
      float: left;
      width: 4.813rem;
      height: 3.781rem;
      .left{
        width: 3.125rem;
        height: 3.328rem;
      }
      .right{
        float: right;
        width: 1.62162rem;
        height: 3.188rem;
        .top{
          width: 1.62162rem;
          height: 1.62162rem;
        }
        .bottom{
          @extend .top;
        }
      }
      .text{
        width: 4.813rem;
        height: 0.5405rem;
        line-height:0.5405rem;
        font-size: $font-r12;
        color: #666666;
      }
    }
  }
  .bottom1{
    width: 10rem;
    height: 4.4594rem;
    .lft{
      margin-left: 0.188rem;
      float: left;
      width: 4.813rem;
      height: 3.781rem;
      .left{
        width: 3.125rem;
        height: 3.328rem;
      }
      .right{
        float: right;
        width: 1.62162rem;
        height: 3.188rem;
        .top{
          width: 1.62162rem;
          height: 1.62162rem;
        }
        .bottom{
          @extend .top;
        }
      }
      .text{
        width: 4.813rem;
        height: 0.5405rem;
        line-height:0.5405rem;
        font-size: $font-r12;
        color: #666666;
      }
    }
    .rit{
      margin-left: 0.063rem;
      float: left;
      width: 4.813rem;
      height: 3.781rem;
      .left{
        width: 3.125rem;
        height: 3.328rem;
      }
      .right{
        float: right;
        width: 1.62162rem;
        height: 3.188rem;
        .top{
          width: 1.62162rem;
          height: 1.62162rem;
        }
        .bottom{
          @extend .top;
        }
      }
      .text{
        width: 4.813rem;
        height: 0.5405rem;
        line-height:0.5405rem;
        font-size: $font-r12;
        color: #666666;
      }
    }
  }
}
/**youlike***/
#like{
  height: auto;
  padding-top: 10px;
  background-color: rgb(231,231,231);
  .title{
    width: 10rem;
    line-height: 0;
    height: 1.486rem;
    text-align: center;
    p.text{
      position:relative;
      box-sizing: border-box;
      width: 100%;
      line-height: 0.675rem;
      font-size: $font-r14;
      text-align: center;
    }
    p.text1{
      width: 100%;
      line-height: 0.675rem;
      font-size: $font-r12;
    }
    span.icon{
      position: absolute;
      top: 50%;
      left: 38%;
      display: block;
      width: 0.540rem;
      height: 0.540rem;
      background: url("//img.alicdn.com/tps/TB1swWZLpXXXXbnXVXXXXXXXXXX-40-40.png")no-repeat center/contain;
      -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
    }
  }
  .goodMain{
    box-sizing: border-box;
    width: 10rem;
    height: auto;
    padding-bottom: 0.081rem;
    ul{
      li.line{
        float: left;
        margin-left: 0.081rem;
        width: 4.90rem;
        height: 0.081rem;
      }
      li{
          box-sizing: border-box;
          margin-top: 0.081rem;
          margin-left: 0.081rem;
          float: left;
          width: 4.90rem;
          height: 6.66rem;
          background-color: #ffffff;
          color: #666;
        .img{
          width: 4.90rem;
          height: 4.444444rem;
        }
        p.name {
          display: -webkit-box;
          display: -moz-box;
          -webkit-line-clamp: 2;
          -moz-line-clamp: 2;
          -ms-line-clamp: 2;
          -o-line-clamp: 2;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -ms-box-orient: vertical;
          -o-box-orient: vertical;
          overflow: hidden;
          margin: 0.188rem 0.313rem;
          font-size: $font-r12;
          text-align: center;
          line-height: 1.5em!important;
          word-break: break-all;
          text-overflow: ellipsis;
        }
        .price{
          font-size: $font-r15;
          color: #ff9621;
        }
      }
    }
  }
}

/**goods*/
#good{
  width: 10rem;
  height: 5.136rem;
  .qg{
    box-sizing: border-box;
    width: 3.7rem;
    height: 5rem;
    border-right: 1px solid rgb(232, 232, 232);
  }
  .rMain{
    width: 6.3rem;
    height: 5.135rem;
    .top{
      width: 6.3rem;
      height:  2.37rem;
      border-bottom: 1px solid rgb(232, 232, 232);
      .hgood{
        width: 2.9188rem;
        height: 2.37rem;
      }
      .xue{
        width: 3.3812rem;
        height: 2.37rem;
      }
    }
    .bottom{
      width: 6.3rem;
      height: 2.7027rem;
      .bb{
        width: 3.108rem;
        height: 2.7027rem;
        border-right: 1px solid rgb(232, 232, 232);
      }
      .bb1{
        width: 3.108rem;
        height: 2.7027rem;
      }
    }
  }
}

/**time**/
#box{
  position: absolute;
  top: 31%;
  left: 58%;
  z-index: 2;
  width: 100%;
  height: auto;
  transform: translate(-50%,-50%);
  span.zero,.minut,.second{
    top: 0;
    left: 0;
    display: inline-block;
    width: 0.54rem;
    height: 0.54rem;
    background: #333;
    color: #ffffff;
    line-height: 0.54rem;
    text-align: center;
    font:{
      size: 0.324rem;
    }
  }
  span.dian{
    font:{
      size: 23px;
    }
  }
}

/**indexfooter**/
@mixin centenr {
  box-sizing: border-box;
  margin: 0 auto;
}
#footer{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 1rem;
  background: #ffffff;
  text-align: center;
  align-items:center;
  align-content: center;
  justify-content: space-between;
  a{
    display: block;
    padding-top: 0.135rem;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    flex: 1;
    img{
      width: 0.59459rem;
      height: 0.59459rem;
      margin: 0.270rem auto 0px;
    }
    p{
      width: 100%;
      font-size: 0.324rem;
      height: 0.8125rem;
      line-height: 0.40625rem;
      color: #666;
    }
  }
}

/**returnTop**/
#returnTop{
  display: none;
  position: fixed;
  z-index: 99;
  right: 0;
  bottom: 50%;
  width: 1.375rem;
  height: 1.375rem;
  background: rgb(231,231,231);
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  img{
    margin-top: 0.270rem;
    width: 0.6875rem;
    height: 0.68575rem;
  }
}


/**goodDeatil**/
@mixin mar-tb{
  margin-top: $r15;
  margin-bottom: $r15;
}
@mixin mar-tbs($top,$bottom){
  margin-top: $top;
  margin-bottom: $bottom;
}
@mixin displayflex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -moz-box;
}
@mixin line5{
  z-index: 3;
  position: absolute;
  top: $r30;
  left: -10%;
  width: 10rem;
  height: $r5;
  background: rgb(238,238,238);
}
@mixin line2{
  z-index: 3;
  position: absolute;
  top: $r25;
  width: 10rem;
  height: $r2;
  background: rgb(238,238,238);
}
@mixin line1{
  z-index: 3;
  position: absolute;
  top: $r25;
  left: 0;
  width: 100%;
  height: 0.027rem;
  background: rgb(238,238,238);
}
@mixin line($rem,$top){
  z-index: 3;
  position: absolute;
  top: $top;
  left: -3%;
  width: 10rem;
  height: $rem;
  background: rgb(238,238,238);
}
@mixin flex{
  -webkit-flex:1;
  -moz-flex:1;
  -ms-flex:1;
  -o-flex:1;
  -webkit-box-flex:1;
  -moz-box-flex:1;
}
#goodDeatil{
  opacity: 1;
  max-width: 10rem;
  height: 100%;
  .header{
    position: fixed;
    z-index: 88;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.2rem;
      .lt{
        margin: 0.1891891891891892rem 0 0.1891891891891892rem 0.2702702702702703rem;
        box-sizing: border-box;
        float: left;
        width: 0.8rem;
        height: 0.8rem;
        line-height: 0.8rem;
        color: #ffffff;
        text-align: center;
        border-radius: 50%;
        background:  rgba(0,0,0,.4);
        img.wlt{
          width: .625rem;
          height: .625rem;
          margin-bottom: 5px;
          vertical-align: middle;
        }
      }
      .shopCart{
        margin: 0.1891891891891892rem 0.1891891891891892rem 0 0;
        box-sizing: border-box;
        float: right;
        width: 0.8rem;
        height: 0.8rem;
        line-height: 0.8rem;
        background: rgba(0,0,0,.4);
        border-radius: 50%;
        img{
          margin: 0.135rem;
          width: 0.5405rem;
          height: 0.5405rem;
        }
      }
  }
  .header2{
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.2rem;
    background: #fff;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0.5px 0 rgba(0,0,0,.09);
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0.5px 0 rgba(0,0,0,.09);
    -ms-box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0.5px 0 rgba(0,0,0,.09);
    -o-box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0.5px 0 rgba(0,0,0,.09);
    ul.nav {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display:-webkit-box;
      display:-moz-box;
      display: -ms-flexbox;
      margin: 0 auto;
      width: 6.081rem;
      height: 1.2rem;
      align-content: center;
      align-self: center;
      align-items: center;
      li{
        font-size: 14px;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-box-flex: 1;
        line-height: 1.2rem;
        color: #999;
        text-align: center;
        box-sizing: border-box;
      }
      li.active{
        color: red;
        border-bottom: 2px solid #ff0036;
      }
    }
    .blt{
      margin: 0.1891891891891892rem 0 0.1891891891891892rem 0.2702702702702703rem;
      box-sizing: border-box;
      float: left;
      width: 0.8rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      border-radius: 50%;
      img.Blt{
        vertical-align: middle;
        width: .625rem;
        height: .625rem;
      }
    }
    .bshopCart{
      position: absolute;
      top: 0.1891891891891892rem;
      right: 0.1891891891891892rem;
      box-sizing: border-box;
      float: right;
      width: 0.8rem;
      height: 0.8rem;
      line-height: 0.8rem;
      border-radius: 50%;
      img{
        margin: 0.135rem;
        width: 0.5405rem;
        height: 0.5405rem;
      }
    }
  }
  #Banner{
    width: 10rem;
    height: 10rem;
    ul.wrap{
      width: 10rem;
      height: 10rem;
      @each $li,$url in(
          'li.banner1':'//img.alicdn.com/imgextra/i2/3547214471/TB1PmNCkAfb_uJjSsrbXXb6bVXa_!!0-item_pic.jpg_760x760Q50s50.jpg',
          'li.banner2':'//img.alicdn.com/imgextra/i2/3547214471/TB2c9kxc8fM8KJjSZFrXXXSdXXa_!!3547214471.jpg_760x760Q50s50.jpg',
          'li.banner3':'//img.alicdn.com/imgextra/i1/3547214471/TB1biU8i4rI8KJjy0FpXXb5hVXa_!!0-item_pic.jpg_760x760Q50s50.jpg',
          'li.banner4':'//img.alicdn.com/imgextra/i2/3547214471/TB2JVjtgDlYBeNjSszcXXbwhFXa_!!3547214471.jpg_760x760Q50s50.jpg',
          'li.banner5':'//img.alicdn.com/imgextra/i1/3547214471/TB1hmxPhh9YBuNjy0FfXXXIsVXa_!!0-item_pic.jpg_2200x2200Q50s50.jpg'
        ){
        #{$li} img{
          width: 10rem;
          height: 10rem;
          /*background: url("#{$url}") no-repeat center/100% 100%;*/
        }
      }
    }
    #swpier6{
      width: 10rem;
      height: 10rem;
      .swiper-pagination-fraction{
        width: 0.9459459459459459rem!important;
        left: auto!important;
        padding:0 0.2702702702702703rem!important;
        line-height:0.5405405405405406rem!important;
        height:0.5405405405405406rem!important;
        border-radius:0.2702702702702703rem!important;
        background-color:rgba(100,100,100,.6)!important;
        transform: translate(-6%,-8%)!important;
        bottom: 0!important;
        right: 0;
        top:auto !important;
        font-size: 14px!important;
      }
    }
    @at-root #origin-img{
      z-index: 9999;
      display:none;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#000;
      .x{
        position: fixed;
        top: 15px;
        right: 15px;
        color: #ffffff;
        font-size: 0.54rem;
      }
    }
     #origin-img .swiper-slide img{
      width: 10rem;
    }
    .swiper-pagination{
      top:1em;
      bottom:auto;
      color:#fff;
      font-size: 25px;
    }

  }
  .detailMain{
    box-sizing: border-box;
    width: 100%;
    padding: 0.270rem 0.270rem 0;
    height: 100%;
    #words{
      ul.wordmain{
        position: relative;
        margin-bottom: $r25;
        .li1{
          height: 1.08rem;
        }
        .li1 .title{
          font-size: $font-r14;
          color: #051B28;
        }
        .li2 {
          height: 0.97rem;
          .price{
            position: relative;
            color: #FF0036;
            font-size: $font-r24;
          }
          .sTxt{
            position: relative;
            top: -2px;
            left: 0;
            padding: 0.02702702702702703rem 0.05405405405405406rem;
            background: #fb6878;
            color: #ffffff;
            height: 0.432432rem;
            line-height: 0.432432rem;
            font-size: $font-r12;
          }
        }
        .li3{
          height: 0.540rem;
          color: #888;
          .oldPrice{
            font:{
              size: $font-r12;
            }
            span{
              margin-left: 0.0540540rem;
              font:{
                size: $font-r12;
              }
              text-decoration: line-through;
            }
          }
        }
        .li4{
          height: 0.486rem;
          color: #FF0036;
          font-size: $font-r12;
        }
        .li5{
          height: 0.378rem;
          color: #FF0036;
          font-size: $font-r12;
        }
        .li6{
          position: relative;
          box-sizing: border-box;
          height: 0.810rem;
          line-height: 0.810rem;
          @include mar-tbs(0.3125rem,0.3125rem);
          .express{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: -webkit-box;
            display: -moz-box;
            width: 100%;
            height: 100%;
            span{
              display: block;
              color: #888;
              -webkit-flex:1;
              -moz-flex:1;
              -ms-flex:1;
              -o-flex:1;
              -webkit-box-flex:1;
              -moz-box-flex:1;
              font-size: $font-r12;
            }
            span:nth-of-type(1){
              text-align: left;
            }
            span:nth-of-type(2){
              text-align: center;
            }
            span:nth-of-type(3){
              text-align: right;
            }
          }
          &:after{
            content: '';
            position: absolute;
            top: $r30;
            width: 100%;
            height: $r5;
            background: rgb(238,238,238);
          }
        }
        .li7{
          position: relative;
          margin-top: $r15;
          .lq{
            position: absolute;
            top: .1rem;
            right: 0;
            width: $r40;
            height: $r20;
            line-height: $r20;
            font-size: $r12;
            color: #999;
            border: 1px solid #999;
            text-align: center;
            border-radius: 10px;
          }
        }
        .li8{
          margin-bottom: $r15;
          position: relative;
          &:after{
            content:'';
            @include line1;
          }
        }
        .li7,.li8{
          .icon{
            float: left;
            width: $r60;
            height: $r12;
            vertical-align: middle;
          }
          .goodtxt{
            padding-left: $r10;
            float: left;
            font-size: $r12;
            color: $c-cq;
          }
          height: $r20;
          line-height: $r20;
        }
        .li9{
          position: relative;
          width: 100%;
          height: $r20;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -o-flex;
          display: -webkit-box;
          display: -moz-box;
          .jf,.dot{
            -webkit-flex:1;
            -moz-flex:1;
            -ms-flex:1;
            -o-flex:1;
            -webkit-box-flex:1;
            -moz-box-flex:1;
          }
          .dot{
            text-align: right;
            font-size: $r12;
            color: #999;
          }
          .jf{
            font-size: $r10;
            color: #FE0038;
          }
          span.jftxt{
            margin-left: $r10;
            font-size: $r12;
            color: #051B28;
          }
          &:after {
            content: '';
            @include line1;
          }
        }
        .li10{
          position: relative;
          @include mar-tb;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -o-flex;
          display: -webkit-box;
          display: -moz-box;
          width: 100%;
          height: $r20;
          .bz,.fast,.seven,.dot{
            -webkit-flex:1;
            -moz-flex:1;
            -ms-flex:1;
            -o-flex:1;
            -webkit-box-flex:1;
            -moz-box-flex:1;
            color: $c-cq;
            font-size: $r12;
          }
          .dot{
            color: #999;
            text-align: right;
          }
          &:after{
            content: '';
            @include line($r5,0.63rem);
          }
        }
        .li11{
          margin-top: $r20;
          margin-bottom: .33rem;
          height: .8rem;
          @include displayflex;
          position: relative;
          .select,.dot{
            @include flex;
            color: $c-cq;
            font-size: $r12;
          }
          .dot{
            color: #999;
            text-align: right;
          }
          &:after{
            content: '';
            @include line($r5,0.73rem);
          }
        }
        .li12{
          position: relative;
          margin-bottom:  $r20;
          height: .8rem;
          @include displayflex;
          .product,.dot{
            @include flex;
            font-size: $r12;
            color: $c-cq;
          }
          .dot{
            color: #999;
            text-align: right;
          }
          &:after{
            content: '';
            @include line($r5,0.73rem);
          }
        }
      }
    }
    #ratings{
      ul.wordmain2{
        position: relative;
        margin-bottom: $r20;
        .index1{
          height: $r20;
          line-height: $r20;
          color: #666;
          font-size: $r14;
        }
        .index2{
          margin-top: $r20;
          height: 2.0rem;
          font-size: $r12;
          color: #666;
          .sever,.fast,.bx,.bz,.zp,.see{
            float: left;
            margin: 0.13513513513513514rem 0.05405405405405406rem;
            padding: 0.13513513513513514rem 0.21621621621621623rem;
            background: #FEE;
            text-align: center;
            border-radius: 10px;
          }
        }
        .index3{
          @include mar-tbs($r10,$r10);
          height: $r24;
          line-height: $r24;
          .comment-top{
            position: relative;
            height: $r24;
            img.left{
              float: left;
              width: $r24;
              height: $r24;
              border-radius: 20px;
            }
            span.middle{
              margin-left: $r10;
              float: left;
              color: #999;
              font-size: 12px;
            }
            img.right{
              position: absolute;
              top: 16%;
              left: 25%;
              float: left;
              width: 1.08rem;
              height:  0.35rem;
            }
          }
        }
        .index4{
          @at-root .comment-top{
            height: 0;
          }
          .comment-middle{
            display: -webkit-box;
            overflow : hidden;
            width: 100%;
            height: 1rem;
            line-height: 0.5rem;
            text-overflow: ellipsis;
            font-size: 12px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .index5{
          .comment-bottom{
            margin-top: $r10;
            font-size: $r12;
            color: #999;
          }
        }
        .index6{
          height: 1.189rem;
          line-height: 1.189rem;
          .more{
            margin: $r10 auto;
            width: 2.891891891891892rem;
            height: 0.6486486486486487rem;
            background: #ffffff;
            border: 1px solid rgba(255,0,54,.5);
            color: rgba(255,0,54,.8);
            font-size: $r12;
            line-height:  0.648rem;
            text-align: center;
            border-radius: 12px;
          }
        }
        &:after{
          content: '';
          position: absolute;
          bottom: -0.25rem;
          left: -3%;
          width: 10rem;
          height: $r5;
          background: rgb(238,238,238);
        }
      }
    }
    #seller{
      position: relative;
      margin-bottom: $r10;
      ul.wordmain3{
        li.li1{
          position: relative;
          width: 100%;
          height: 1.513rem;
          div.logo{
            img{
              width: 1.459rem;
              height: 1.459rem;
            }
          }
          span.title{
            position: absolute;
            top: 0;
            left: 1.648rem;
            font-size: $r15;
            color: #333;
          }
          .tianm{
            position: absolute;
            left: 1.648rem;
            top: $r25;
            width: 2.054rem;
            height: 0.378rem;
          }
        }
        .li2{
          @include mar-tbs(0.486rem,0.486rem);
          @include displayflex;
          width: 100%;
          height: 0.54rem;
          line-height: 0.54rem;
          div.logo{
            height: 0;
            img{
              height: 0;
            }
          }
          .detail{
            @include displayflex;
            width: 100%;
            height: $r20;
            line-height: $r20;
            .baby,.server,.express{
              position: relative;
              display: block;
              @include flex;
              font-size: $r12;
              color: #666;
              text-align: center;
              span.score{
                color: #E13E4C;
              }
            }
            i{
              position: absolute;
              top: 0.09375rem;
              right: 6.666%;
              display: block;
              width: $r12;
              height: $r12;
              background: url('') no-repeat center/contain;
            }
          }
        }
        .li3{
          @include displayflex;
          div.left,div.right{
            @include flex;
          }
          span.all{
            margin-left: 35%;
          }
          span.all,span.enter{
            display: block;
            width: 2.891891891891892rem;
            height: 0.6486486486486487rem;
            background: #ffffff;
            border: 1px solid rgba(255,0,54,.5);
            color: rgba(255,0,54,.8);
            font-size: $r12;
            line-height:  0.648rem;
            text-align: center;
            border-radius: 12px;
          }
        }
      }
      &:after{
        content:'';
        z-index: 3;
        position: absolute;
        bottom: -$r15;
        left: -3%;
        width: 10rem;
        height: $r5;
        background: rgb(238,238,238);
      }
    }
    #seeBanner{
      position: relative;
      width: 10rem;
      margin-bottom: $r10;
      div.title{
        padding: $r10;
        font-size: 14px;
      }
      ul.wordmain4{
        width: 100%;
        div.title{
          padding: $r10;
          font-size: $r12;
        }
        div.item{
          width: 100% !important;
        }
        @each $li in (
          'li.banner1',
          'li.banner2',
          'li.banner3',
          'li.banner4',
          'li.banner5',
          'li.banner6',
          'li.banner7',
          'li.banner8',
          'li.banner9',
          'li.banner10',
          'li.banner11',
          'li.banner12'
        ){
          #{$li}:not(:first-child){
            margin-left: 0.3125rem;
          }
          #{$li}{
            float: left;
            width: 3rem;
            height: auto;
            font-size: $r12;
            img{
              width: 3rem;
              height: 3rem;
            }
            .text{
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              height: 1rem;
              line-height: 0.5rem;
              text-overflow: ellipsis;
              color: $c-cq;
            }
            .number{
              .oldPrice{
                text-decoration: line-through;
                color: #666;
                height: 0.486rem;
                line-height: 0.486rem;
              }
              .latestPrice{
                color: $c-cq;
              }
            }
          }
        }
      }
    }
    #details{
      width: 100%;
      .title{
        position: relative;
        margin: 0 auto;
        left: -3%;
        width: 10rem;
        height: $r30;
        line-height: $r30;
        text-align: center;
        background: rgb(245, 245, 245);
        .text{
          display: block;
          font-size: $r12;
          color: #666;
        }
        .cell1{
          position: absolute;
          top: $r10;
          left: 55%;
          hr{
            width: 1.43rem;
          }
        }
        .cell2{
          position: absolute;
          top: $r10;
          right: 55%;
          hr{
            width: 1.43rem;
          }
        }
      }
      .subtitle{
        position: relative;
        padding: $r10;
        background: #ffffff;
        text-align: center;
        color: $c-cq;
        font-size: $r15;
        font-weight: 400;
        line-height: 0.75rem;
        &:after{
          position: absolute;
          left: -3%;
          display: block;
          content:'';
          width: 10rem;
          height: 10px;
          background: #eee;
          border-top: 1px solid rgba(0,0,0,.1);
        }
      }
      .picMain{
        position: relative;
        left: -3%;
        width: 10rem;
        img{
          display: block;
          margin: 0 auto;
          width: 10rem;
          height: auto;
          vertical-align: top;
          padding-bottom: 0;
        }
      }
    }
  }
}

/***goodDetailfooter***/
#footers{
  position: fixed;
  left: 0;
  z-index: 99;
  bottom: 0;
  @include displayflex;
  width: 10rem;
  max-height: 50px;
  line-height: 50px;
  background-color: #ffffff;
  align-items: center;
  align-content: center;
  align-self: center;
  text-align: center;
  a{

    display: block;
    @include flex;
    img{
      margin: 5px auto 3px;
      max-width: 22px;
      max-height: 22px;
    }
    .text{
      font-size: $r12;
      line-height: 0.46rem;
      color: #999;
    }
  }
  a:nth-child(1){
    max-width: 1.4475rem;
    min-width: 13%;
  }
  a:nth-child(2){
    max-width: 1.4475rem;
    min-width: 13%;
  }
  a:nth-child(3){
    max-width: 1.4475rem;
    min-width: 13%;
  }
  a:nth-child(4){
    max-width: 2.8125rem;
    background: #FF9500;
    color: #ffffff;
    font-size: 0.35rem;
  }
  a:nth-child(5){
    max-width: 2.8125rem;
    background: #FF0036;
    color: #ffffff;
    font-size: 0.35rem;
  }
}

/***goodDetail cover***/
#cover{
  display: none;
  position: fixed;
  z-index: 999;
  width: 10rem;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  .cover_wrap{
    position: absolute;
    top: 20%;
    width: 10rem;
    height: 14.305rem;
    background: #ffffff;
  }
}

/***loading***/
#loading{
  display: none;
  position: fixed;
  top:  0;
  left: 50%;
}

/*****moreratings*****/
#comment{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 1px;
  z-index: 999;
  width: 10rem;
  background: #FFF;
  transition: all .2s ease-in-out;
  div.scrollWrapper{
    z-index: 999;
  }
  .cHead{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    box-sizing: border-box;
    position: fixed;
    display: block;
    padding-right:$r15;
    width: 10rem;
    height: 1.216rem;
    line-height: 1.216rem;
    color: #051b28;
    background: #FFFFFF;
    font-size: $r14;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0.5px 0 rgba(0,0,0,.09);
    .return{
      position: absolute;
      left: 5px;
      width: $r50;
      padding-left: $r15;
      background: url('//g.alicdn.com/mui/cover/3.0.0/sliding-menu/img/back@2x.png') no-repeat 0 50%;
      background-size: $r12 $r15;
      color: #666;
    }
    .rat{
      position: absolute;
      right: 44%;
      font-weight: bold;
    }
  }
  ul.listTitle{
    overflow: hidden;
    padding: 1.2em 0 .4em;
    margin: 0 10px;
    font-size: $r12;
    color: #051b28;
    border-bottom: 1px solid #e5e5e5;
    li{
      float: left;
      padding: 2.5% 4.5%;
      margin: 0 2.3% 3.5% 0;
      border-radius: 10px;
      background-color: #FEE;
      color: #666;
    }
    li.active{
      background-color: #FF0036;
      color: #FFF;
    }
  }
  ul.listBody{
    li.item{
      padding: 20px 0;
      margin: 0 10px;
      border-bottom: 1px solid #e5e5e5;
      .info{
        overflow: hidden;
        margin-bottom: .8em;
        margin-top: 5px;
        color: #999;
        font-size: $r12;
        .name{
          float: left;
        }
        .time{
          float: right;
        }
      }
      blockquote.text{
        font-size: $r14;
        word-break: break-all;
      }
      ul.pics{
        padding: 0;
        overflow: hidden;
        margin-top: 5px;
        li{
          display: -webkit-box;
          -webkit-box-align: center;
          -webkit-box-pack: center;
          display: -ms-flexbox;
          -ms-flex-pack: center;
          -ms-flex-pack: center;
          float: left;
          width: $r55;
          height: $r55;
          margin: 0 .48em .5em 0;
          background-color: #FFFFFF;
          img{
            max-width: 100%;
            max-height: 100%;
            vertical-align: top;
          }
        }
      }
      div.add{
        margin-top: .8em;
        color: #666;
        p.title{
          font-size: $r12;
          color: #ff0028;
        }
        blockquote{
          @extend .text;
        }
      }
      ul.skt{
        margin-top: 5px;
        color: #999;
        font-size: $r12;
        li{
          float: left;
        }
      }
    }
  }
}
#comment.move{
  top: 0;
  left: 0;
}

#ratings-img{
  z-index: 9999;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  .x{
    position: fixed;
    top: 15px;
    right: 15px;
    color: #ffffff;
    font-size: 0.54rem;
  }
  .swiper-pagination{
    font-size: 14px;
    top:1em;
    bottom:auto;
    color:#fff;}
}


/****Sku****/
#sku{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height:  100%;
  background: rgb(0,0,0);
  background: rgba(0,0,0,.4);
  transition: all 1.5s;
  .sku_wrap{
    transform: translate3d(0,100%,0);
    .sku_content{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      .close{
        z-index: 3;
        position: absolute;
        top: 11px;
        right: 11px;
        width: 0.59rem;
        height: 0.59rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 13.43rem;
    background-color: #fff;
    box-shadow: 0 -1px 40px rgba(0,0,0,.3);
    .headers{
      position: relative;
      padding: 0.270rem 0 0.270rem 3.405rem;
      .img-wrap{
        position: absolute;
        overflow: hidden;
        padding: 1px;
        top: -0.756rem;
        left: 0.27rem;
        width: 2.70rem;
        height: 2.70rem;
        border: 1px solid rgba(0,0,0,.1);
        background: #fff;
        border-radius: 4px;
        img{width: 100%; height: 100%;}
      }
      .sku-main{
        color: $c-cq;
        .price{
          font-size: $r15;
          color: #FF0036;
        }
        .stock{
          font-size: 14px;
        }
        .sku-info{
          font-size: $r12;
        }
      }
    }
    div.body{
      position: absolute;
      top: 2.513513513rem;
      left: 0;
      right: 0;
      padding: 0 0.40540540540540543rem 0.2702702702702703rem;
      &:before{
        content:'';
        display: block;
        width: 100%;
        height: 1px;
        border-top: 1px solid rgba(0,0,0,.1);
      }
      ul.sku-list{
        color: #666;
        font-size: $r12;
        li.typeO{
          padding-bottom: 10px;
          border-bottom: 1px solid rgba(0,0,0,.1);
          h2{
            font-weight: 400;
            padding:{
              top: 10px;
              bottom: 10px;
            }
          }
          div.items{
            span{
              position: relative;
              display: inline-block;
              padding: 0.162rem 0.324rem;
              margin: 0 8px 8px 0;
              border: 1px solid #f5f5f5;
              background-color: #f5f5f5;
              border-radius: 8px;
            }
            span.active{
              background: #FF0036;
              color: #fff;
            }
            span.disabled{
              background-color: #f5f5f5;
              color: #666;
            }
          }
        }
        li.typeT{
         @extend li.typeO;
        }
      }
      .number-wrap{
        color: #666;
        font-size: $r12;
        .number-line{
          padding:{
            top: 0.2702702702702703rem;
            bottom: 0.2702702702702703rem;
          }
          line-height: 0.97rem;
          .addNumber{
            float: right;
            width: 2.70rem;
            height: .97rem;
            border-radius: 3px;
            .decrease{
              float: left;
              border-right: 1px solid #fff;
            }
            .increase{
              float: left;
              border-left: 1px solid #fff;
            }
            input[type=number]{
              float: left;
              width: 0.946rem;
              height: 0.918rem;
              background: #f5f5f5;
              border: 1px solid #f5f5f5;
              box-sizing: border-box;
              font: {
                size: 0.351rem;
                weight:700;
              }
              line-height: 0.8648rem;
              text-align: center;
             -webkit-appearance: none;
              -ms-appearance: none;
              -moz-appearance: none;
              -o-appearance: none;

            }
            button{
              width: $r30;
              height: 0.918rem;
              background-color: #f5f5f5;
              border: 1px solid #f5f5f5;
              font-size: 0.351rem;
              line-height: 0.8648rem;
              outline: 0;
              border: none;
            }
          }
        }
      }
      div.install-wrap{
        white-space: nowrap;
        h2{
          padding-top: 10px;
          padding-bottom: 10px;
          font:{
            weight:  400;
            size: $r12;
          }
          color: #666;
        }
        &:before{
          content: '';
          display: block;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        .select{
          span{
            display: inline-block;
            margin: 0 .216rem  .216rem  0;
            background: #f5f5f5;
            padding: .262rem .162rem;
            font-size: $r12;
            color: $c-cq;
            border-radius: 8px;
            text-align: center;
          }
          span.active{
            background: #FF0036;
            color: #fff;
          }
        }
      }
    }
  }
  .OK{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: $r12;
    color: #fff;
    background: #FF0036;
    height: 1.297rem;
    line-height: 1.297rem;
    text-align: center;
  }
}
#okHeight{
  height: 1.297rem;
  line-height: 1.297rem;
}


/****express****/
@mixin middleCenter{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  -o-box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  -o-box-pack: center;
}
@mixin dis-box{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
}
@mixin b-flex{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  -o-box-flex: 1;
}
@mixin textcenter{
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  -o-box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  -o-box-pack: center;
}
#express{
  width: 10rem;
  min-height: 100%;
  .eHead{
    position: fixed;
    top: 0;
    left: 0;
    width: 10rem;
    height: $r50;
    background: #fff;
    background-size: contain;
    -webkit-box-shadow:  0 1px 3px rgba(0,0,0,.2);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    font:{
      size: $r12;
      weight: 400;
    }
    color: #666;
    ul{
      position: relative;
      display: -webkit-box;
      display: -moz-box;
      -webkit-box-align: center;
      -moz-box-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      width: 100%;
      height: 100%;
      font-size: $r14;
      li.text{
        span{
          float: left;
        }
        i.aw{
          float: right;
          display: block;
          width: $r14;
          height: $r14;
          margin: 3px 0 0 3px;
          background: url('')no-repeat center/contain;
        }
      }
      a.return{
        position: absolute;
        top: 24%;
        left: 10%;
        padding: $r2 $r2;
        border: 1px solid rgb(231,231,231);
        border-radius: 4px;
      }
    }
  }
  .bHeight{
    height: $r50;
  }
  ul.body{
    margin: 50px 0;
    padding: 0 15px;
    text-align: center;
    @include middleCenter;
    .img-text{
      p{
        margin-top: 5px;
        color: #999;
        font-size: 13px;
      }
    }
    div.img{
      width: 1.35rem;
      height: 1.48rem;
      margin: 0 auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  ul.shopList{
    margin: 0 15px;
    border: 1px #c1c1c1 solid;
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    li{
      position: relative;
      width: 100%;
      height: 1.027rem;
      line-height: 1.027rem;
      color: #000;
      &:after{
        position: absolute;
        content:'';
        right: 5%;
        top: 38%;
        border: #666 solid;
        border-width: 3px 0 0 3px;
        width: 6px;
        height: 6px;
        -webkit-transform: rotate(135deg);
      }
      span{
        padding-left: 15px;
      }
    }
    li:nth-child(1){
      border-bottom: 1px #ccc solid;
    }
  }
}



/***myTb***/
@mixin boder-b32{
  border-bottom: .32rem solid #e7e7e7;
}
#my{
  overflow: hidden;
  width: 10rem;
  height: 100%;
  .user{
    position: relative;
    width: 10rem;
    height: 3.133rem;
    background: #d34201 url('//gw.alicdn.com/tfscom/TB10.51HFXXXXXqXpXXYx6l2pXX-750-235.jpg_q90') no-repeat top center/cover;
    .headLogo{
      z-index: 3;
      position: absolute;
      overflow: hidden;
      left: .467rem;
      bottom: -1rem;
      padding: .067rem;
      width: 1.867rem;
      height: 1.867rem;
      background: rgba(255,255,255,.7);
      border-radius: 100%;
      img{
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .user-name{
      position: absolute;
      left: 2.667rem;
      bottom: .2rem;
      padding-right: 0.533rem;
      background: url("http://gw.alicdn.com/tfscom/TB1B2UNHpXXXXaDaXXXpQsyGpXX-40-32.png_q90") no-repeat right center/0.533rem;
      font-size:  .48rem;
      font-weight: 400;
      color: #fff;
    }
  }
  .user-info{
    @include middleCenter;
    height: 1.44rem;
    text-align: center;
    border-bottom: .32rem solid #e7e7e7;
    background: #fff;
    ul{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-box;
      display: -o-box;
      width: 10rem;
      padding-left: 2.267rem;
      box-sizing: border-box;
      li{
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-box-flex: 1;
        -o-box-flex: 1;
        font-size: $r13;
      }
    }
  }
  .order-warp{
    @include  boder-b32;
    ul.orderAct{
      height: 1.76rem;
      @include dis-box;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-box-align: center;
      -o-box-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-box-pack: center;
      -o-box-pack: center;
      li{
        img{
          width: .587rem;
          height: .587rem;
        }
        p{  text-align: center;  }
        width: 100%;
        @include b-flex;
        font-size: $r12;
      }
    }
    .all-order{
      border-top: 1px solid #e7e7e7;
      height: 1.067rem;
      padding-left: .32rem;
      @include middleCenter;
      .icon{
        @include middleCenter;
        width: .667rem;
        height: .667rem;
        margin-right: .267rem;
        background: #5090cd;
        text-align: center;
        line-height: 0;
        border-radius: .053rem;
        img{
          width: .427rem;
          height: .427rem;
        }
      }
      .title{
        @include b-flex;
        font-size: $r14;
      }
      .sub{
        font-size: $r12;
        color: #666;
      }
      .arrow{
        margin-right: .133rem;
        width: 6px;
        height: 6px;
        border: #666 solid;
        border-width: 1.5px 0 0 1.5px;
        line-height: .067rem;
        -webkit-transform: rotate(135deg);
      }
    }
  }
  .middle{
    @include boder-b32;
     ul{
       li{
         @include middleCenter;
         height: 1.067rem;
         padding-left: .32rem;
         .icon{
           @include middleCenter;
           width: .667rem;
           height: .667rem;
           margin-right: .267rem;
           background: #5090cd;
           text-align: center;
           line-height: 0;
           border-radius: .053rem;
           img{
             width: .427rem;
             height: .427rem;
           }
         }
         .title{
           @include b-flex;
           font-size: $r14;
         }
         .sub{
           font-size: $r12;
           color: #666;
         }
         .arrow{
           margin-right: .133rem;
           width: 6px;
           height: 6px;
           border: #666 solid;
           border-width: 1.5px 0 0 1.5px;
           line-height: .067rem;
           -webkit-transform: rotate(135deg);
         }
       }
       li:nth-child(1){
           .icon{
             background: rgb(231,162,0)!important;
           }
         }
       li:nth-child(2){
         border-top: 1px solid #e7e7e7;
       }
       li:nth-child(3){
         border-top: 1px solid #e7e7e7;
         .icon{
           background: rgb(0,174,239)!important;
           img{
             width: .487rem;
             height: .487rem;
           }
         }
       }
       li:nth-child(4){
         border-top: 1px solid #e7e7e7;
         .icon{
           background: rgb(0,174,239)!important;
         }
       }
    }
  }
  .bottom{
    @include boder-b32;
    ul{
      li{
        @include middleCenter;
        height: 1.067rem;
        padding-left: .32rem;
        .icon{
          @include middleCenter;
          width: .667rem;
          height: .667rem;
          margin-right: .267rem;
          background: #5090cd;
          text-align: center;
          line-height: 0;
          border-radius: .053rem;
          img{
            width: .427rem;
            height: .427rem;
          }
        }
        .title{
          @include b-flex;
          font-size: $r14;
        }
        .sub{
          font-size: $r12;
          color: #666;
        }
        .arrow{
          margin-right: .133rem;
          width: 6px;
          height: 6px;
          border: #666 solid;
          border-width: 1.5px 0 0 1.5px;
          line-height: .067rem;
          -webkit-transform: rotate(135deg);
        }
      }
      li:nth-child(1){
        .icon{
          background: rgb(230,76,46)!important;
        }
      }
      li:nth-child(2){
        border-top: 1px solid #e7e7e7;
        .icon{
          background: rgb(0,174,239)!important;
          img{
            width: .487rem;
            height: .487rem;
          }
        }
      }
    }
  }
  footer{
    @include dis-box;
    font-size: 13px;
    height: 1.147rem;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    div:nth-child(1){
      padding: 0 .067rem 0 .32rem;
      box-sizing: border-box;
      color: #051b28;
    }
    div.name p{
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    div{
      @include dis-box;
      @include b-flex;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-box-align: center;
      -o-box-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-box-pack: center;
      -o-box-pack: center;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
    }
    div:not(:first-child){
      border-left: 1px solid #e7e7e7;
    }
  }
}



/****shopCart***/
@mixin checkb{
  label {
    display: inline-block;
    width: .533rem;
    height: .533rem;
    background: url('') no-repeat center/.52rem;
    cursor: pointer;
  }
  input[type="checkbox"]:checked + label {
    background: url('') no-repeat center/.52rem;
  }
  input[type="checkbox"] {
   display: none;
  }
}
@mixin line2{
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  -ms-line-clamp: 2;
  -o-line-clamp: 2;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -o-box-orient: vertical;
}
#shopCart {
  .scroll-wrap {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 1px;
  }
  .title {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 10rem;
    height: 1.2rem;
    background: #fff;
    font-size: .405rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0.5px 0 rgba(0,0,0,.09);
    @include dis-box;
    div,a{
      @include dis-box;
      @include textcenter;
      @include b-flex;
    }
    a.back {
      display: block;
      background: url('') no-repeat .8888rem center/.267rem;
    }
  }
  .cart{
    .cart_wrap {
      margin-bottom: .32rem;
      border-bottom: .32rem solid rgb(238,238,238);
      .shopTitle {
        position: relative;
        padding-left: .32rem;
        width: 100%;
        height: 1.067rem;
        border-top: 1px solid #e7e7e7;
        box-sizing: border-box;
        @include dis-box;
        div {
          @include middleCenter;
        }
        .check {
          position: relative;
          margin-right: .32rem;
          box-sizing: border-box;
          @include checkb;
        }
        .icon img{
          width: .427rem;
          height: .427rem;
        }
        .icon{
          margin-right: .32rem;
          box-sizing: border-box;
          line-height: 1px;
        }
        .Title{
          font-size: $r12;
          @include dis-box;
          @include b-flex;
          span.maintitle,i.arrow{
            @include b-flex;
          }
          i.arrow{
            display: block;
            min-width: .32rem;
            min-height: .347rem;
            background: url("") 5% center no-repeat/.2rem .347rem;
          }
        }
        .state{
          margin-left: .32rem;
          font-size: $r12;
          @include b-flex;
          text-align: center;
          p{
            @include b-flex;
          }
        }
        .success{
          display: none;
        }
      }
      .item-box{
        @include middleCenter;
        background: rgb(245,245,245);
        .check {
          @include middleCenter;
          position: relative;
          margin-right: -.32rem;
          box-sizing: border-box;
          width: 1.173rem;
          @include checkb;
        }
        .img-wrap{
          width: 2.6rem;
          height: 2.6rem;
          margin: 0.16rem 0 0.16rem 0.32rem;
          img{
            width: 2.6rem;
            height: 2.6rem;
          }
        }
        .item-info{
          @include b-flex;
          padding: 0.16rem 0.32rem;
          box-sizing: border-box;
          .goodTitle{
            @include line2;
            overflow: hidden;
            word-break: break-all;
            height: 0.88rem;
            line-height: .453rem;
            font-size: $r12;
          }
          .sku{
            margin-top: 0.12rem;
            color: #999;
            font-size: $r12;
            line-height: .453rem;
          }
          .stock{
            margin-top: 0.12rem;
            color:#ff5000;
            font-size: $r12;
          }
          .price-amount{
            @include middleCenter;
            .price{
              @include b-flex;
              font-size: $r15;
              color: #f60;
            }
            .amount{
              @include b-flex;
              text-align: right;
              font-size: 15px;
            }
          }
        }
        .edit-info{
          display: none;
          @include b-flex;
          height: 2.6rem;
          .addNumber{
            @include middleCenter;
            margin: .08rem 0;
            padding-bottom: .08rem;
            height: 1.04rem;
            div.decrease,div.increase{
              width: 1rem;
              text-align: center;
              color: #878787;
              font-size: $r20;
              font-weight: bold;
            }
            input[type='number']{
              @include b-flex;
              width: 1.89rem;
              border: none;
              color: #878787;
              text-indent: 50%;
            }
          }
          .sku{
            @include middleCenter;
            font-size: $r12;
            color: #999;
          }
        }
        .delete.disBox{
          display: -webkit-box!important;
          display: -moz-box!important;
          display: -ms-box!important;
          display: -o-box!important;
        }
        .delete{
          display: none!important;
          @include middleCenter;
          width: 1.6rem;
          height: 2.6rem;
          font-size: $r14;
          color: #fff;
          background: #f60;
        }
      }
    }
  }
  .nullCart{
    margin-top: 2.133rem;
    .cartImg{
      margin: 0 auto;
      width: 5.4rem;
      height: 5.4rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .text{
      text-align: center;
      p:nth-child(1){
        font-size: $r13;
        margin-top: .133rem;
      }
      p:nth-child(2){
        font-size: $r12;
        margin-top: .133rem;
        color: #999;
      }
    }
    .kuangkuang{
      text-align: center;
      a{
        display:inline-block;
        margin: 0 auto;
        border:1px solid #051b28;
        padding: .107rem .667rem;
        font-size: $r12;
        border-radius: .107rem;
        cursor: pointer;
        color: #051b28;
      }
    }
  }
  footer.buy{
    z-index: 999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 10rem;
    height: 1.307rem;
    line-height: 1.307rem;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0.5px 0 rgba(0,0,0,.09);
    label:not(.qx) {
        display: inline-block;
        margin-left: .35rem;
        width: .533rem;
        height: .533rem;
        background: url('') no-repeat center/.52rem;
        cursor: pointer;
    }
    input[type="checkbox"]:checked + label {
      background: url('') no-repeat center/.52rem;
    }
    input[type="checkbox"] {
      display: none;
    }
    label.qx{
      margin-left: .35rem;
      font-size: $r15;
      color: $c-cq;
    }
    div.total{
      display: inline-block;
      margin-left: 2rem;
      font-size: 14px;
      .sum{
        font-szie: $r13;
        color: $c-cq;
      }
      .price{
        font-size: 15px;
        color: rgb(255,85,0);
      }
    }
    div.pay{
      float: right;
      width: 2.773rem;
      height: 100%;
      background: rgb(255,85,0);
      color: #fff;
      line-height: 1.307rem;
      text-align: center;
      font-size: 14px;
    }
  }
}
